<!-- 设备弹窗 -->
<template>
  <div v-drag class="device-box">
    <div class="uav-details-title">设备详情</div>
    <p class="close" @click="off()"></p>
    <div class="info-list">
      <div class="info-li">
        <p class="info-label">设备名称</p>
        <p class="info-item">{{ detailList.deviceName }}</p>
      </div>
      <div class="info-li">
        <p class="info-label">设备类型</p>
        <p class="info-item">
          {{
            detailList.deviceType == 2
              ? '光电反制'
              : detailList.deviceType == 4
              ? '无线电全向反制'
              : detailList.deviceType == 5
              ? '无线电定向反制'
              : detailList.deviceType == 8
              ? '雷达探测'
              : detailList.deviceType == 7
              ? 'AOA侦测'
              : detailList.deviceType == 10
              ? 'ADS-b侦测'
              : detailList.deviceType == 9
              ? '无线电频谱侦测'
              : ''
          }}
        </p>
      </div>
      <div class="info-li">
        <p class="info-label">同步时间</p>
        <p class="info-item">
          {{ detailList.syncDate == null ? '*' : detailList.syncDate }}
        </p>
      </div>
      <div class="info-li">
        <p class="info-label">设备经度</p>
        <p class="info-item">{{ detailList.deviceLongitude }}</p>
      </div>
      <div class="info-li">
        <p class="info-label">设备纬度</p>
        <p class="info-item">{{ detailList.deviceLatitude }}</p>
      </div>
      <div class="info-li">
        <p class="info-label">设备状态</p>
        <p class="info-item" :class="{ red: detailList.workStatus == 0 }">
          {{ detailList.workStatus == 1 ? '链路正常' : '链路异常' }}
        </p>
      </div>
      <!-- 全向设备 -->
      <div class="info-li last" v-if="detailList.deviceType == 4">
        <p v-if="omnidirectionalopenVisble" class="info-btn blue" @click="closeDevice(detailList)">
          关闭设备({{ omnidirectionalcount }} s)
        </p>
        <template v-else>
          <p class="info-btn" @click="openCounter(detailList, 1, 'omnidirectionalopenVisble')">
            驱离
          </p>
          <p class="info-btn" @click="openCounter(detailList, 2, 'omnidirectionalopenVisble')">
            迫降
          </p>
          <!-- <p v-else class="info-btn" @click="closeDevice(detailList)">关闭设备</p> -->
        </template>
      </div>
      <!-- 定向设备 -->
      <div class="info-li" v-if="detailList.deviceType == 5">
        <p class="info-label">设备模式</p>
        <el-radio-group v-model="modeltype" class="ml-4" @change="onChange">
          <el-radio value="1" size="large">自动</el-radio>
          <el-radio value="2" size="large">手动</el-radio>
        </el-radio-group>
      </div>
      <div class="info-li" v-if="detailList.deviceType == 5 && modeltype == '2'">
        <p class="info-label">操作说明</p>
        <p class="info-item">选择地图上点击设备要朝向的点</p>
      </div>
      <div class="info-li" v-if="detailList.deviceType == 5 && modeltype == '2'">
        <p class="info-label">朝向经度</p>
        <p class="info-item">{{ towardLng }}</p>
      </div>
      <div class="info-li" v-if="detailList.deviceType == 5 && modeltype == '2'">
        <p class="info-label">朝向纬度</p>
        <p class="info-item">{{ towardLat }}</p>
      </div>
      <div class="info-li last" v-if="detailList.deviceType == 5 && modeltype == '2'">
        <p class="info-btn" @click="rotateDevice">旋转设备</p>
      </div>
      <div class="info-li last" v-if="detailList.deviceType == 5">
        <p v-if="openVisble" class="info-btn blue" @click="closeDevice(detailList)">
          关闭设备({{ directionalcount }} s)
        </p>
        <template v-else>
          <p class="info-btn" @click="openCounter(detailList, 1, 'directional')">驱离</p>
          <p class="info-btn" @click="openCounter(detailList, 2, 'directional')">迫降</p>
          <!-- <p v-else class="info-btn" @click="closeDevice(detailList)">关闭设备</p> -->
        </template>
      </div>
    </div>
    <el-image style="width: 110px; height: 12px" src="/img/top-left.png" class="fixed-img1" />
    <el-image style="width: 110px; height: 12px" src="/img/top-right.png" class="fixed-img2" />
    <el-image style="width: 110px; height: 12px" src="/img/bottom-left.png" class="fixed-img3" />
    <el-image style="width: 110px; height: 12px" src="/img/bottom-right.png" class="fixed-img4" />
  </div>
</template>
<script setup>
  import { toRefs, ref, watch, onMounted, computed, inject } from 'vue'
  import Title from '@/components/home/title.vue'
  import { manualInstruction, openTrace } from '@/api/home.js'
  const props = defineProps({
    deviceDetailList: {
      type: Object,
      default: {},
    },
    deviceCountBtn: {
      type: Object,
      default: {
        13: {
          timer: null,
          count: 60,
          countdown: true,
        },
        132: {
          timer: null,
          count: 60,
          countdown: true,
        },
      },
    },
  })

  const { deviceDetailList } = toRefs(props)
  const emits = defineEmits([
    'showDeviceInfo',
    'changeDisposal',
    'closeEquipmentCounter',
    'cancelMarker',
  ])
  const detailList = ref({})
  watch(
    props,
    (item) => {
      detailList.value = props.deviceDetailList
      if (detailList.value.trackDisable == 1) {
        modeltype.value = '2'
      } else {
        modeltype.value = '1'
      }
    },
    {
      deep: true,
    }
  )
  let modeltype = ref('1')
  const openType = ref(1)
  const directionalcount = ref(60) // 倒计时时间
  const countdownTimes = ref(null) // 倒计时定时器
  //全向
  const omnidirectionalcount = ref(60) // 倒计时时间
  const omnidirectionalTimes = ref(null) // 倒计时定时器
  const deviceInfo = ref({})
  const towardLng = ref(null)
  const towardLat = ref(null)
  const message = inject('$message')
  //开启设备
  const openVisble = ref(false)
  let omnidirectionalopenVisble = ref(false)
  const openCounter = (info, disposalType, mode) => {
    switch (mode) {
      case 'directional':
        openVisble.value = true
        break
      case 'omnidirectionalopenVisble':
        omnidirectionalopenVisble.value = true
        break

      default:
        break
    }
    let item = info
    item.disposalType = disposalType // 处置类型

    if (item.deviceType == 5) {
      countdownTimes.value = setInterval(() => {
        directionalcount.value-- //递减
        if (directionalcount.value <= 0) {
          // <=0 变成获取按钮
          openVisble.value = false
          directionalcount.value = 60
          clearInterval(countdownTimes.value)
        }
      }, 1000) //1000毫秒后执行
    } else {
      omnidirectionalTimes.value = setInterval(() => {
        omnidirectionalcount.value-- //递减
        if (omnidirectionalcount.value <= 0) {
          // <=0 变成获取按钮
          omnidirectionalopenVisble.value = false
          omnidirectionalcount.value = 60
          clearInterval(omnidirectionalTimes.value)
        }
      }, 1000) //1000毫秒后执行
    }
    emits('changeDisposal', item, disposalType, 1)
  }
  //关闭设备
  const closeDevice = (info) => {
    if (info.deviceType == 5) {
      openVisble.value = false
      clearInterval(countdownTimes.value)
      directionalcount.value = 60
    } else {
      omnidirectionalopenVisble.value = false
      clearInterval(omnidirectionalTimes.value)
      omnidirectionalcount.value = 60
    }
    emits('closeEquipmentCounter', info)
  }

  // 切换设备模式(自动模式)
  const onChange = async (val) => {
    if (val * 1 == 1) {
      let params = {
        deviceId: detailList.value.id,
        trackDisable: 0,
      }
      let res = await openTrace(params)
      if (res.code * 1 !== 200) {
        message({
          message: res.msg,
          type: 'warning',
        })
      } else {
        towardLng.value = ''
        towardLat.value = ''
        emits('cancelMarker')
      }
    }
  }
  //关闭弹窗
  const off = () => {
    emits('showDeviceInfo', 2)
    modeltype.value = '1'
    emits('cancelMarker')
  }
  //获取手动模式下，点击地图传过来的经纬度
  const sendLngLat = (item) => {
    towardLng.value = item.longitude
    towardLat.value = item.latitude
  }
  //旋转设备
  const rotateDevice = async () => {
    if (towardLng.value && towardLat.value) {
      let params = {
        deviceId: detailList.value.id,
        trackDisable: 1,
      }
      let res = await openTrace(params)
      if (res.code == 200) {
        onManual()
      } else {
        message({
          message: res.msg,
          type: 'error',
        })
      }
    } else {
      message({
        message: '请先在地图上点击设备要朝向的点',
        type: 'warning',
      })
    }
  }
  //调取手动指引接口
  const onManual = async () => {
    let params = {
      deviceId: detailList.value.id,
      lon: towardLng.value,
      lat: towardLat.value,
    }
    let res = await manualInstruction(params)
    if (res.code == 200) {
      message({
        message: res.data,
        type: 'success',
      })
    } else {
      message({
        message: res.msg,
        type: 'error',
      })
    }
  }
  onMounted(() => {
    detailList.value = props.deviceDetailList
  })
  defineExpose({ modeltype, sendLngLat })
</script>
<style lang="scss" scoped>
  .device-box {
    /* // width: 100%;
    // height: 98%;
    // padding-top: 2%; */
    position: relative;
    width: 19vw;
    background-color: rgba(8, 16, 22, 0.8);
    position: absolute;
    top: 38%;
    right: 13%;
    transform: translate(-50%, -50%);
    z-index: 22;
    padding: 15px 20px;
    .uav-details-title {
      cursor: move;
      color: #ffffff;
      font-size: 20px;
    }
    .close {
      position: absolute;
      top: 5%;
      right: 5%;
      cursor: pointer;
      width: 15px;
      height: 15px;
      background: url('/img/close.png') no-repeat center;
      background-size: 100% 100%;
      float: right;
    }
    .info-list {
      width: 100%;
      height: calc(100% - 25px);
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      align-content: flex-start;
      justify-content: space-evenly;
      .info-li {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        padding: 5px 0;
        p {
          width: 40%;
          font-size: calc(100vw / 1920 * 14);
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
        }
        .info-label {
          width: 25%;
          line-height: 30px;
        }
        .info-item {
          width: 70%;
          height: 30px;
          padding-left: 5%;
          font-size: calc(100vw / 1920 * 12);
          border: 1px solid #2aa0de;
          border-radius: 4px;
          line-height: 30px;
        }
        .red {
          border-color: rgba(255, 0, 0, 1);
          color: rgba(255, 0, 0, 1);
        }
      }
      .last {
        justify-content: center;
        .info-btn {
          cursor: pointer;
          width: 108px;
          line-height: 30px;
          margin: 0 0 0 3%;
          text-align: center;
          background: #aaa400;
          border-radius: 2px;
        }
        .blue {
          background-color: #085f99;
        }
      }
    }
    .fixed-img1 {
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .fixed-img2 {
      position: absolute;
      top: 0px;
      right: 0px;
    }
    .fixed-img3 {
      position: absolute;
      bottom: 0px;
      left: 0px;
    }
    .fixed-img4 {
      position: absolute;
      bottom: 0px;
      right: 0px;
    }
  }
  :deep(.el-radio.el-radio--large .el-radio__label) {
    color: #ffffff;
  }
</style>

<style lang="scss">
  .GPS-box {
    .el-input,
    .el-input__wrapper {
      background: rgb(12, 37, 63) !important;

      box-shadow: none !important;
      color: white;
    }

    .el-input__wrapper {
      border: 1px solid #05eaff !important;
    }

    .el-input__inner {
      color: white;
    }

    .el-button {
      border: none !important;
    }
  }
</style>
